<template>
    <div id="pjStatistics">
        <div class="backImg">
            <div class="navTitle">话务接通客户满意度评价统计</div>
            <div class="navImg1"></div>
            <table class="hovertable">
                <tr>
                    <th v-for="(item,index) in navList" :key="index">{{item}}</th>
                    <!--                    <th>呼入数</th>-->
                    <!--                    <th>呼入成功数</th>-->
                    <!--                    <th>成功率</th>-->
                    <!--                    <th>呼出数</th>-->
                    <!--                    <th>成功数</th>-->
                    <!--                    <th>成功率</th>-->
                    <!--                    <th>评价总数</th>-->
                    <!--                    <th>优秀</th>-->
                    <!--                    <th>良好</th>-->
                    <!--                    <th>一般</th>-->
                    <!--                    <th>较差</th>-->
                    <!--                    <th>很差</th>-->
                </tr>
                <tr v-for="(item,index) in list" :key="index">
                    <td>{{item.agentid}}</td>
                    <td>{{item.hurushu}}</td>
                    <td>{{item.huruchenggongshu}}</td>
                    <td>{{item.huruchenggonglv}}</td>
                    <td>{{item.huchushu}}</td>
                    <td>{{item.huchuchenggongshu}}</td>
                    <td>{{item.huchuchenggonglv}}</td>
                    <td>{{item.pingjiashu}}</td>
                    <td>{{item.youxiu}}</td>
                    <td>{{item.lianghao}}</td>
                    <td>{{item.yiban}}</td>
                    <td>{{item.jiaocha}}</td>
                    <td>{{item.hencha}}</td>
                </tr>

            </table>
        </div>

        <div class="navBtm">
            <div class="navFlex" @click="tabLeft">
                <img style="margin-left: -90px" src="../../../assets/img/workrake/left.png" alt="">
                <img style="margin-left: -90px" src="../../../assets/img/workrake/left.png" alt="">
                <img style="margin-left: -90px" src="../../../assets/img/workrake/left.png" alt="">
            </div>
            <div class="navBtn">
                <div class="navNum" v-for="(item,index) in 9" :key="index" :class="active==index+1?'activeClass':''"
                     @click="tab(index)">{{index+1}}
                </div>
            </div>
            <div class="navFlex" @click="tabRight">
                <img style="margin-left: -90px" src="../../../assets/img/workrake/right.png" alt="">
                <img style="margin-left: -90px" src="../../../assets/img/workrake/right.png" alt="">
                <img style="margin-left: -90px" src="../../../assets/img/workrake/right.png" alt="">
            </div>
        </div>
    </div>
</template>


<script>
    import {getCallCountList} from "../../../network/home";

    export default {
        name: "pjStatistics",
        data() {
            return {
                active: "1",
                navList: ['工号', '呼入数', '呼入成功数', '成功率', '呼出数', '呼出成功数', '成功率', '评价总数', '优秀', '良好', '一般', '较差', '很差',],
                list: [{ code: 101,title1: 'Item 1C',title2: 'Item 1C',title3: 'Item 1C',title4: 'Item 1C',title5: 'Item 1C',title6: 'Item 1C',title7: 'Item 1C',title8: 'Item 1C',title9: 'Item 1C',title10: 'Item 1C',title11: 'Item 1C',title12: 'Item 1C'}],
                page:'1'
            }
        },
        mounted() {
            this.page = 1
            this.getCallCountList()
        },
        methods: {
            getCallCountList() {
                getCallCountList({
                    pageIndex: this.page,
                    pageSize: 11,
                }).then(res => {
                    if (res.code = 200) {
                        // console.log(res.data)
                        this.list = res.data.records
                    }
                })
            },

            tab(index) {
                this.active = index + 1
                // alert(this.active)
                this.page = this.active
                this.getCallCountList()
            },
            tabLeft() {
                if (this.active != 1) {
                    this.active = parseInt(this.active) - 1
                    // alert(this.active)
                    this.page = this.active
                    this.getCallCountList()
                }
            },
            tabRight() {
                if (this.active != 9) {
                    this.active = parseInt(this.active) + 1
                    // alert(this.active)
                    this.page = this.active
                    this.getCallCountList()
                }
            }

        }
    }
</script>

<style scoped>
    .backImg {
        position: relative;
        background: url("../../../assets/img/workrake/sp1.png");
        background-size: 100% 100%;
        width: 90%;
        margin-left: 5%;
        height: 860px;
    }

    .navTitle {
        background: url("../../../assets/img/workrake/sp3.png");
        background-size: 100% 100%;
        width: 560px;
        height: 60px;
        padding-top: 6px;
        text-align: center;
        position: absolute;
        top: 8%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 30px;
        color: #03F5FF;
    }

    .navImg1 {
        background: url("../../../assets/img/workrake/sp4.png");
        background-size: 100% 100%;
        width: 560px;
        height: 60px;
        position: absolute;
        top: 8%;
        left: 50%;
        transform: translate(-50%, -50%);
    }


    table.hovertable {
        position: absolute;
        top: 130px;
        width: 90%;
        left: 5%;

        font-family: verdana, arial, sans-serif;
        font-size: 11px;
        color: #ffffff;
        border-collapse: collapse;
    }

    table.hovertable th {
        background-color: #0D2040;
        border-width: 1px;
        padding: 20px 30px;
        border-style: solid;
        width: 120px;
        border-color: #253A64;
        opacity: 0.8;
    }

    table.hovertable tr {
        background-color: #ffffff;
    }

    table.hovertable td {
        border-width: 1px;
        padding: 20px 30px;
        border-style: solid;
        border-color: #253A64;
        text-align: center;
        background: #0E2142;
        color: #ffffff;
    }

    .navBtm {
        font-size: 40px;
        color: #03F5FF;
        position: absolute;
        bottom: 60px;
        left: 555px;
        width: 950px;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .navBtm .navFlex {
        display: flex;
    }

    .navBtm .navBtn {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-right: 80px;
    }

    .navBtm .navBtn .navNum {
        border: 1px solid #00f5ff;
        width: 60px;
        height: 50px;
        text-align: center;
        margin: 0 15px;
    }

    .activeClass {
        color: #ffffff;
        background: #00f5ff;
    }
</style>
